<template>
  <div class="detail">
    <div class="nav">
      <tabs
        v-model="active"
        scrollspy
        sticky
        title-active-color="#ff7777"
        line-height="0"
        line-width="0"
        :border="false"
      >
        <div slot="nav-left" class="left-icon" @click="$router.go(-1)">
          <icon name="arrow-left" />
        </div>
        <!-- 商品tab -->
        <tab title="商品">
          <!-- 图片轮播 -->
          <image-swiper :images="images"></image-swiper>
          <!-- 商品基本信息 -->
          <base-info :baseInfo="baseInfo"></base-info>
          <!-- 商家信息 -->
          <shop-info :shop="shop"></shop-info>
          <!-- 商品详情信息 -->
          <goods-info :goodsInfo="goodsInfo"></goods-info>
        </tab>
        <tab title="参数">
          <goods-params :paramInfo="paramInfo"></goods-params>
        </tab>
        <tab title="评论">
          <comment-info :commentInfo="commentInfo"></comment-info>
        </tab>
        <tab title="推荐">
          <recommend :recommendInfo="recommendInfo"></recommend>
        </tab>
      </tabs>
    </div>
    <goods-action>
      <goods-action-icon icon="chat-o" text="客服" />
      <goods-action-icon icon="cart-o" text="购物车" to="/car" />
      <goods-action-button type="warning" text="加入购物车" @click="addCar" />
      <goods-action-button type="danger" text="立即购买" />
    </goods-action>
  </div>
</template>

<script>
import {
  Tab,
  Tabs,
  Icon,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Toast
} from "vant";
import ImageSwiper from "./components/ImageSwiper";
import BaseInfo from "./components/BaseInfo";
import ShopInfo from "./components/ShopInfo";
import GoodsInfo from "./components/GoodsInfo";
import GoodsParams from "./components/GoodsParams";
import commentInfo from "./components/commenInfo";
import Recommend from "./components/Recommend";

import { get } from "../../helpers/request";
import { BaseInfoUtil, Shop, GoodsParam } from "../../util/util";
export default {
  name: "detail",
  components: {
    Tab,
    Tabs,
    Icon,
    GoodsAction,
    GoodsActionIcon,
    GoodsActionButton,
    ImageSwiper,
    BaseInfo,
    ShopInfo,
    GoodsInfo,
    GoodsParams,
    commentInfo,
    Recommend
  },
  data() {
    return {
      iid: "",
      active: 0,
      images: [],
      baseInfo: {},
      shop: {},
      goodsInfo: {},
      paramInfo: {},
      commentInfo: {},
      recommendInfo: []
    };
  },
  created() {
    let iid = this.$route.params.id;
    this.iid = iid;
    get("/detail", { iid })
      .then(res => {
        let data = res.result;
        // 商品轮播图
        this.images = data.itemInfo.topImages;
        //商品基本信息
        this.baseInfo = new BaseInfoUtil(
          data.itemInfo,
          data.columns,
          data.shopInfo.services
        );
        //商家信息
        this.shop = new Shop(data.shopInfo);
        //商品详细信息
        this.goodsInfo = data.detailInfo;
        // 保存参数信息
        this.paramInfo = new GoodsParam(
          data.itemParams.info,
          data.itemParams.rule
        );
        //评论信息
        if (data.rate.list) {
          this.commentInfo = data.rate.list[0];
        }
      })
      .catch(error => {
        console.log("商品详情请求失败");
      });

    //热门推荐信息
    get("/recommend").then((res, error) => {
      if (error) return;
      this.recommendInfo = res.data.list;
    });
  },
  methods: {
    addCar() {
      let goodsInfo = {};
      goodsInfo.iid = this.iid;
      goodsInfo.imgURL = this.images[0];
      goodsInfo.title = this.baseInfo.title;
      goodsInfo.desc = this.baseInfo.desc;
      goodsInfo.newPrice = this.baseInfo.nowPrice;
      this.$store.commit("addCart", goodsInfo);
      Toast.success("成功加入到购物车");
    }
  }
};
</script>

<style scoped lang="scss">
.detail {
  padding-bottom: 50px;
  .left-icon {
    width: 44px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
  }
}
</style>
